/**
 * Created by jinglan on 2019/3/5.
 */
import React, { Component } from 'react'
import {
    Image,
    Button,
    TouchableOpacity,
    Platform,
    View,
    StatusBar
} from 'react-native';
import  MessagePage from "./message/MessagePage"
import  HomePage from "./home/HomePage"
import  MinePage from "./mine/MinePage"
import  LoginPage from "./login/LoginPage"


import { createStackNavigator, createBottomTabNavigator, createAppContainer,StackViewTransitionConfigs, } from 'react-navigation'

const BottomTabNavigator = createBottomTabNavigator(
    {

        MessagePage: {
            screen: MessagePage,
            navigationOptions: () => ({
                tabBarLabel: '消息',
                tabBarIcon: ({focused, tintColor}) => (
                    <Image source={focused? require('./img/message_red.png') : require('./img/message.png')}
                           style={{marginTop:-8}} />
                ),
            })
        },

        HomePage: {
            screen: HomePage,
            navigationOptions: () => ({
                tabBarLabel: '应用',
                tabBarIcon: ({focused, tintColor}) => (
                    <Image source={focused? require('./img/application_red.png') : require('./img/application.png')}
                           style={{marginTop:-8}} />


                ),
            })
        },



        MinePage: {
            screen: MinePage,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon: ({focused, tintColor}) => (
                    <Image source={focused? require('./img/account_red.png') : require('./img/account.png')}
                           style={{marginTop:-8}} />


                ),
            }
        }
    },
    {
        initialRouteName: 'HomePage', //第一次加载时初始选项卡路由的 routeName
        order: ['MessagePage','HomePage','MinePage'], //定义选项卡顺序的 routeNames 数组
        tabBarOptions: {
            inactiveTintColor: "#A0A6B5",
            activeTintColor: "#283043",
            style: {
                borderTopColor:"#E4EBEF",
                borderTopWidth:1,
            },
            labelStyle: {
                fontSize: 11,
                marginTop: -12
            }
        }
    }
);


// 'PurchasedPage',

// PurchasedPage: {
//     screen: PurchasedPage,
//         navigationOptions: () => ({
//         tabBarLabel: '已购',
//         tabBarIcon: ({focused, tintColor}) => (
//             <Image source={focused? require('./imageNew/icon_lanyigou.png') : require('./imageNew/icon_yigou.png')}
//                    style={{marginTop:-8}} />
//         ),
//     })
// },

// 数组中的路由，可以自定义动画效果，这里只改了登录, 语法有点懵
const IOS_MODAL_ROUTES = ['LoginPage'];

const dynamicModalTransition = (transitionProps, prevTransitionProps) => {
    const isModal = IOS_MODAL_ROUTES.some(
        screenName =>
        screenName === transitionProps.scene.route.routeName ||
        (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)
    );
    return StackViewTransitionConfigs.defaultTransitionConfig(
        transitionProps,
        prevTransitionProps,
        isModal
    );
};



const navigator = createStackNavigator({
    HomePage: { screen: BottomTabNavigator ,
        //禁掉导航栏，全局作用的
        navigationOptions: () => ({
            header: null
        })
    },
    LoginPage: { screen: LoginPage ,
        navigationOptions: () => ({
            header: null
        })},
    },{
        initialRouteName: 'LoginPage',
    }

);

const NavigatorOptions = (navigation) => {
    const routes = navigation.state.routes;
    // 通过params得到传进来的title，并赋值给headerTitle。
    const params = routes ? routes[navigation.state.index].params : null;
    const headerTitle = params ? params.title : '';
    const headerTitleStyle = {
        fontSize:  18,
        lineHeight: 25,
        fontFamily: "PingFangSC-Medium",
        flex:1,
        letterSpacing:0.45,
        color: '#333333',
        textAlign: 'center',
        paddingTop: 6 ,
        alignSelf:'center',
    };
    // const headerBackTitle = null;
    const headerTintColor = '#333333';
    const headerStyle = {
        backgroundColor: "#ffffff",
        shadowColor: '#E5E5E5',
        shadowOpacity: 0,
        borderBottomWidth: 1,
        borderBottomColor: '#E5E5E5',
        marginTop:Platform.OS==='android' ? 20 : 0,
        elevation: 0,
    };

    // headerBackImage:require("../images/icon/logo.png"),

    const headerBackTitle = null;

    const headerLeft = (
        <TouchableOpacity style={{width:50,height:50,justifyContent:"center",}} onPress={()=>{navigation.goBack()}}>
        <Image style={{marginLeft:16,marginTop:10}}
            source={require('./img/left.png')}
        />
        </TouchableOpacity>
    );


    const headerRight = (
       <View style={{width:50,height:50}}/>
    );


    StatusBar.setBarStyle('dark-content');
    if(Platform.OS==='android') {
        StatusBar.setTranslucent(true)
        StatusBar.setBackgroundColor("transparent")
    }
    return { headerTitle, headerStyle, headerTitleStyle, headerTintColor, headerBackTitle,headerLeft,headerRight };
};




const AppContainer = createAppContainer(navigator); //底部导航
export default class RootPage extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }

}
